<template>
    <el-drawer title="我是标题" :visible.sync="dialogVisible" :with-header="false" class="demand_box" size='960px' @close="resetForm">
        <div class="flexbox flexcolumn height_100" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <div class="demand_head flexbox flexcenter flexbetween">
                <div>
                    <div class="demand_title">任务详情</div>
                    <span class="ana_time">任务ID：{{queryInfo.id}}</span>
                </div>
                <span class="icon_btn icon_btn_32" @click="resetForm"><img src="@/assets/img/close_check.svg" alt=""></span>
            </div>
            <div class="flexbox flexcenter flexbetween pl_20 pr_20">
                <div class="flexbox flexcenter">
                    <div class="sch_tab" :class="{'active':queryInfo.type==1}" @click="selectType(1)">推广系列</div>
                    <div class="sch_tab" :class="{'active':queryInfo.type==2}" @click="selectType(2)">广告组</div>
                    <div class="sch_tab" :class="{'active':queryInfo.type==3}" @click="selectType(3)">广告</div>
                </div>
                <el-select v-model="queryInfo.advertiser_id" placeholder="请选择" style="width:330px" size="small" @change="changeAdver">
                    <el-option v-for="item in advertiser_ids" :key="item.advertiser_id" :label="item.advertiser_name" :value="item.advertiser_id">
                    </el-option>
                </el-select>
            </div>
            <div class="demand_center flex">
                <el-table :data="tableData" height="100%" class="com_table" ref="multipleTable" :key="queryInfo.type">
                    <template v-if="queryInfo.type==1">
                        <el-table-column prop="campaign_name" label="广告系列名称"></el-table-column>
                    </template>
                    <template v-else-if="queryInfo.type==2">
                        <el-table-column prop="adgroup_name" label="广告组名称"></el-table-column>
                        <el-table-column prop="promotion_type" label="推广对象类型">
                            <template slot-scope="scope">
                                {{scope.row.promotion_type=='VIDEO_SHOPPING'?'短视频带货':'直播间带货'}}
                            </template>
                        </el-table-column>
                    </template>
                    <template v-else-if="queryInfo.type==3">
                        <el-table-column prop="ad_name" label="广告名称"></el-table-column>
                        <el-table-column prop="ad_format" label="素材类型">
                            <template slot-scope="scope">
                                {{ad_format[scope.row.ad_format]}}
                            </template>
                        </el-table-column>
                    </template>

                    <el-table-column prop="status" label="任务状态">
                        <template slot-scope="scope">
                            <div class="flexbox flexcenter" v-if="scope.row.status==1"><span class="circle_text circle_green"></span> <span class="green_text">创建成功</span></div>
                            <div class="flexbox flexcenter" v-else-if="scope.row.status==2">
                                <span class="circle_text circle_red"></span>
                                <span class="red_text">创建失败</span>
                                <el-tooltip class="item" effect="dark" :content="scope.row.err_msg" placement="top">
                                    <i class="el-icon-question" style="color: #fe6262"></i>
                                </el-tooltip>
                            </div>
                            <div class="flexbox flexcenter" v-else-if="scope.row.status==3"><span class="circle_text circle_yellow"></span> <span class="green_text">执行中</span></div>
                            <div class="flexbox flexcenter" v-else-if="scope.row.status==6"><span class="circle_text circle_red"></span> <span class="green_text">任务中止</span></div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="demand_footer flexbox flexcenter">
                <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
                </el-pagination>
            </div>
        </div>
    </el-drawer>
</template>

<script>
export default {
    props: [],
    name: "",
    data() {
        return {
            name: "",
            loading: false,
            dialogVisible: false,
            queryInfo: {
                id: null,
                type: 1,
                page: 1,
                limit: 20,
                advertiser_id: "",
            },
            total: 0,
            tableData: [],
            advertiser_ids: [],
            ad_format: {
                SINGLE_IMAGE: "图片",
                SINGLE_VIDEO: " 短视频",
                LIVE_CONTENT: "直播间画面",
            },
        };
    },
    created() {},
    methods: {
        getData(item) {
            this.dialogVisible = true;
            this.advertiser_ids = item.advertiser;
            this.queryInfo.id = item.id;
            this.queryInfo.advertiser_id = item.advertiser[0].advertiser_id;
            this.name = item.advertiser_name;
            this.getDataList();
        },
        //获取
        async getDataList() {
            this.loading = true;
            const { data: res } = await this.$http.post(
                this.$tiktokUrl + "launch/TiktokTask/task_info",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.total = res.data.count;
                this.tableData = res.data.list;
            }
        },

        selectType(type) {
            if (this.queryInfo.type == type) {
                return;
            } else {
                this.queryInfo.page = 1;
                this.queryInfo.type = type;
                this.getDataList();
            }
        },

        changeAdver(){
            this.queryInfo.page = 1;
            this.getDataList();
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList();
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.queryInfo.page = val;
            this.getDataList();
        },

        // 关闭重置表单
        resetForm() {
            this.queryInfo.type = 1;
            this.tableData = [];
            this.dialogVisible = false;
        },
    },
    components: {},
};
</script>
<style scoped>
.demand_head {
    height: 100px;
}
.ana_time {
    font-size: 12px;
    color: #616c85;
    height: 23px;
    line-height: 23px;
    padding: 0 8px;
    border: 1px solid #ebebeb;
    margin-right: 16px;
    border-radius: 2px;
    margin-top: 12px;
    display: inline-block;
}
.sch_tab {
    height: 56px;
    font-size: 16px;
    color: #616c85;
    line-height: 56px;
    margin-right: 20px;
    position: relative;
    cursor: pointer;
}
.sch_tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: #4475ff;
    transition: all 0.3s;
    transform: scaleX(0);
}
.sch_tab.active {
    font-weight: bold;
    color: #17233d;
}
.sch_tab.active::after {
    transform: scaleX(1);
}
.circle_text {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.circle_green {
    background-color: #00c271;
}
.circle_red {
    background-color: #fe6262;
}
.circle_yellow {
    background-color: #ffa940;
}
.green_text {
    margin: 0 5px;
}
.red_text {
    color: #fe6262;
    margin: 0 5px;
}
.yellow_text {
    color: #ffa940;
    margin: 0 5px;
}
</style>


